<template>
    <div>
        <Row :gutter="10">
            <Col span="24">
            <Card class="slideList">
                <p slot="title" style="height: 26px">
                    <Icon type="ios-albums-outline"></Icon>
                    直播间列表
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="liveList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
            </Card>
            </Col>
        </Row>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                playerOptions: {
                    sources: [{
                        type: "rtmp/mp4",
                        src: "rtmp://115.28.157.85:1935/live/w4ENJxO5"
                    }],
                    techOrder: ['flash'],
                    autoplay: true,
                    controls: true
                },
                //表头
                slideTableHead:[
                    {
                        title: '主播编号',
                        align: 'center',
                        key: 'anchorId',
                        width:'120',
                        "sortable": true,
                    },
                    {
                        title: '主播昵称',
                        align: 'center',
                        key: 'nickName',

                    },
                    {
                        title:'主播头像',
                        width:"100px",
                        align: 'center',
                        className:'anchorAvater',
                        render: (h, params) => {
                            const row = params.row;
                            const anchorAvater = row.anchorAvater;
                            return h('img', {
                                attrs: {
                                    src:anchorAvater,
                                },
                                style:{
                                    width:"70px",
                                    height:'70px'
                                }
                            });
                        }
                    },
                    {
                        title:'缩略图',
                        width:"100px",
                        align: 'center',
                        className:'thumbnail',
                        render: (h, params) => {
                            const row = params.row;
                            const thumbnail = row.thumbnail;
                            return h('img', {
                                attrs: {
                                    src:thumbnail,
                                },
                                style:{
                                    width:"100px",
                                    height:'70px'
                                }
                            });
                        }
                    },
                    {
                        title: '标题',
                        align: 'center',
                        key: 'title',
                    },
                    {
                        title: '粉丝数量',
                        align: 'center',
                        key: 'fansNum',
                    },
                    {
                        title: '房间费用',
                        align: 'center',
                        key: 'fee',
                    },
                    {
                        title: '观看人数',
                        align: 'center',
                        key: 'watchNum',
                    },
                    {
                        title:'直播间类型',
                        key:'type',
                        align:'center',
                        width:'120',
                        filters: [
                            {label: '普通',value: "1"},
                            {label: '收费房',value: "2"},
                            {label: '密码房',value: "3"},
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === "1") {
                                return r.type === "1";
                            } else if (v === "2") {
                                return r.type === "2";
                            }else if (v === "3") {
                                return r.type === "3";
                            }
                        },
                        render(h,params,index){
                            const row = params.row;
                            if(row.type=="1"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#19be6b'
                                        },
                                    }, '审核中'),
                                ]);
                            }else if (row.type=="2"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#ff9900'
                                        },
                                    }, '已通过'),
                                ]);
                            }else if (row.type=="3"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#ed3f14'
                                        },
                                    }, '未通过'),
                                ]);
                            }
                        },
                    },
                    {
                        title: '直播间ID',
                        align: 'center',
                        key: 'liveId',
                    },
                    {
                        title: '分享次数',
                        align: 'center',
                        key: 'shareNum',
                    },
                    {
                        title: '服务器ID',
                        align: 'center',
                        key: 'SID',
                    },
                    {
                        title: '礼物收益',
                        align: 'center',
                        key: 'giftProfit',
                    },
                    {
                        title: '开播时间',
                        align: 'center',
                        key: 'startTime',
                    },
                    {
                        title: '房间收益',
                        align: 'center',
                        key: 'profit',
                    },
                    {
                        title:'直播间状态',
                        key:'status',
                        align:'center',
                        width:'120',
                        filters: [
                            {label: '已结束',value: "0"},
                            {label: '正在直播',value: "1"},
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === "0") {
                                return r.status === "0";
                            } else if (v === "1") {
                                return r.status === "1";
                            }
                        },
                        render(h,params,index){
                            const row = params.row;
                            if(row.status=="0"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#ff9900'
                                        },
                                    }, '已结束'),
                                ]);
                            }else if(row.status=="1"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#19be6b'
                                        },
                                    }, '正在直播'),
                                ]);
                            }
                        },
                    }
                ],
                selectURl:'/live/list',
                liveList:[],
                tipeNews:'暂无数据',
                total:0,
                pageSize:0,
                page:1,
            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self = this;
                self.$axios.get(self.selectURl + '?curr=' + self.page).then((res) => {
                    for (var i = 0; i < res.data.data.rows.length; i++) {
                        let time = new Date(res.data.data.rows[i].startTime).toLocaleString();
                        res.data.data.rows[i].startTime = time;
                    }
                    self.liveList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }
        }
    }
</script>